import { useContext } from 'react'
import { WardMaintenanceContext } from '../../_context'

import styles from '../../idnex.module.less'

export default () => {
  const { wardList, setSelectMenu, seleteMenu, setSelectMenuTwo, seleteMenuTwo } = useContext(WardMaintenanceContext)

  return (
    <div className={styles.left}>
      <div className={styles.level}>
        <div className={styles.title}>病区一级分类</div>
        <div className={styles['menu-content']}>
          {wardList.map((item, index) => (
            <div
              className={`${styles.info} ${seleteMenu === index ? styles.active : ''}`}
              key={item.id}
              onClick={() => {
                setSelectMenu(index)
                if (index !== seleteMenu) {
                  setSelectMenuTwo(0)
                }
              }}
            >
              <div title={item.unit} className={styles.ellipsis}>
                {item.unit}
              </div>
              <div>{item.sonSize}</div>
            </div>
          ))}
        </div>
      </div>
      <div className={styles.level}>
        <div className={styles.title}>病区二级分类</div>
        <div className={styles['menu-content']}>
          {wardList[seleteMenu]?.endemicAreaVos?.map((item, index) => (
            <div
              className={`${styles.info} ${seleteMenuTwo === index ? styles.active : ''}`}
              key={item.id}
              onClick={() => setSelectMenuTwo(index)}
            >
              <div title={item.unit} className={styles.ellipsis}>
                {item.unit}
              </div>
              <div>{item.sonSize}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
